<template>
  <div style="width:100%;height:100%;">
    <div class="print" v-for=" (item, index) in drawQr" :key="index">
      <div :id="'qrcode'+index"></div>
      <div class="printText">
          <div>二维码：{{item.barcode}}</div>
          <div>产品名称：{{item.materialName}}</div>
          <div>产品编号：{{item.materialCode}}</div>
        </div>
    </div>
  </div>
</template>

<script>
import  QRcode  from "qrcodejs2"

export default {
  components: {
    // barcode: VueBarcode
  },
  props: {
    drawQr:{ 
      type: Array,
      default(){
        return [];
      }
    },
  },
  created () {
    // this.paginator(this.delInfo)
  },
  mounted () {
      this.$nextTick(() => {
        this.qrcode();
      })
  },
  data () {
    return {}
  },
  methods: {
    qrcode(){
      this.drawQr.map((x, index )=> {
        document.getElementById(`qrcode${index}`).innerHTML = '';
        let qrcode = new QRcode(`qrcode${index}`,{
          width:100,
          height:100,
          text:`${x.barcode}`
        });
      });
    },
  },
  watch: {
    drawQr: {
      handler(newVal) {
        if(newVal) {
          this.$nextTick(() => {
            this.qrcode();
          })
        }
      }
    }
  }
}
</script>

<style scoped>
  .print{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .printText{
    text-align:center;
    font-size:10px;
    margin-top:10px;
  }
</style>
